﻿@{
    Layout = "";
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>客户展示页</title>
    <link rel="stylesheet" href="~/ui/layui/css/layui.css">
    <link rel="stylesheet" href="~/ui/font/iconfont.css">
    <link href="~/ui/toastr/toastr.min.css" rel="stylesheet" />
    @*<link rel="stylesheet" href="https://at.alicdn.com/t/font_3409354_xy7vw51vsqp.css">*@

    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            /*cursor: url(../ui/images/pointer.png) 8 3, auto !important;*/ /*鼠标移入*/
        }

        html, body {
            height: 100%;
        }

        body {
            /*background-image: url('../ui/images/bg.png');*/
            /*background-repeat: no-repeat;*/
            /*display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        align-items: center;*/
            background: #032e61;
        }

        #app {
            display: flex;
            /*flex-wrap: wrap;*/
            /*justify-content: center;*/
            align-items: center;
            /*padding: 10px 0;*/
            height: 100%;
            position: relative;
            flex-direction: column;
            width:100%;
        }

        .head {
            height: 60px;
            line-height: 60px;
            margin-bottom: 20px;
            position: relative;
            width: 50%;
            text-align: center;
        }

        .head-img {
            background: url(../ui/images/head.gif) no-repeat center center;
            background-size: 100%;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 30px;
        }



        .layui-row {
            width: 100%;
            margin-bottom: 20px;
            flex: 1;
            display: flex;
            justify-content: center;
        }

        .layui-col-xs4 {
            /*height: 100%;*/
            margin-bottom: 10px;
        }

        .layui-card {
            margin: 0 10px;
            background-color: transparent;
            border: 1px solid #eee;
            border-radius: 10px;
            height: 100%;
        }

        .layui-card-header {
            text-align: center;
            background-color: transparent;
            color: #fff;
            font-size: 24px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            overflow: hidden;
            padding: 0;
            height: 100px;
        }

        .icon_cab {
            width: 50px;
            height: 50px;
            background: url(../ui/images/icon_cab.png) no-repeat center center;
            background-size: 100%;
        }

        .icon_normal {
            width: 50px;
            height: 50px;
            background: url(../ui/images/icon_normal.png) no-repeat center center;
            background-size: 100%;
        }

        .icon_offline {
            width: 50px;
            height: 50px;
            background: url(../ui/images/icon_offline.png) no-repeat center center;
            background-size: 100%;
        }

        .icon_fault {
            width: 50px;
            height: 50px;
            background: url(../ui/images/icon_fault.png) no-repeat center center;
            background-size: 100%;
            /* animation: blink 2s infinite */
        }

        .layui-card-body {
            display: flex;
            justify-content: space-around;
            padding: 10px 10px 0;
        }

            .layui-card-body .fl {
                width: 100%;
                font-size: 20px;
                color: #fff;
                overflow: hidden;
            }

            .layui-card-body .fr {
                width: 100%;
                line-height: 120px;
                height: 120px;
                font-size: 20px;
                color: #fff;
                overflow: hidden;
            }

        .top,
        .pos,
        .bottom {
            height: 40px;
            line-height: 40px;
        }

        .bottom {
            display: flex;
            justify-content: space-around;
        }

            .bottom div {
                width: 50%;
            }

        .temp {
            width: 100%;
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-around;
        }

        .iconfont {
            margin-left: 10px;
            font-size: 26px;
            border-radius: 50%;
        }

        .eleValue {
            margin-left: 10px;
            color: #00ff21;
            font-size: 20px;
        }
        /* 关闭 区域*/
        .logout {
            width: 150px;
            height: 100px;
            left: 0;
            top: 0;
            position: absolute;
            opacity: 0;
        }
        /*参数设置区域*/
        .paramSet {
            width: 150px;
            height: 100px;
            right: 0;
            top: 0;
            position: absolute;
            opacity: 0;
        }

        .dateSet {
            width: 150px;
            height: 100px;
            left: 0;
            bottom: 0;
            position: absolute;
            opacity: 0;
        }
        .screenSet {
            width: 150px;
            height: 100px;
            right: 0;
            bottom: 0;
            position: absolute;
            opacity: 0;
        }

        #content {
            margin-top: 10px;
            user-select: none;
            display: none;
            padding: 0 10px;
        }

        #dateContainer {
            margin-top: 10px;
            user-select: none;
            display: none;
            padding: 10px;
        }
        /*动画*/
        @@keyframes mymove {
            from {
                color: gray;
            }

            to {
                color: #00ff21;
            }
        }

        .state {
            display: flex;
            justify-content: space-around;
        }
        /*.icon-chongdianzhong {
                    animation: mymove 0.5s infinite;
                }*/
        .layui-layer-title {
            user-select: none;
        }

        .myclass {
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            text-align: left;
            width:100px;
        }

        .myBlock {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .layui-form-item {
            margin-bottom: 5px !important;
        }
    </style>

    <style>
        * {
            font-family: "Poppins", sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            width:100%;
            display: flex;
            justify-content: center;
            align-items: center;
            /*background: #2e2e44;*/
        }

        .digital-clock {
            position: relative;
            color: #fff;
            background: #2e2e44;
            width: 425px;
            padding: 20px 45px;
            box-shadow: 0 5px 25px rgba(14, 21, 37, 0.8);
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

            .digital-clock:before {
                content: "";
                position: absolute;
                background: linear-gradient(45deg, #24ff6d, #2f93f1, #ff5e9a);
                background-size: 200% 200%;
                top: -5px;
                left: -5px;
                bottom: -5px;
                right: -5px;
                z-index: -1;
                filter: blur(40px);
                animation: glowing 10s ease infinite;
            }

        @@keyframes glowing {
            0% {
                background-position: 0 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0 50%;
            }
        }

        .time {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hours,
        .dots,
        .minutes {
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 600;
            padding: 0 10px;
            line-height: 125px;
        }

        .hours,
        .minutes {
            font-size: 6.5em;
            width: 125px;
        }

        .dots {
            font-size: 5em;
            color: #929292;
        }

        .hours {
            background: -webkit-linear-gradient(90deg, #634dff, #5fd4ff);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
        }

        .minutes {
            background: -webkit-linear-gradient(90deg, #ff5e9e, #ffb960);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
        }

        .right-side {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-left: 10px;
        }

        .period,
        .seconds {
            font-size: 1.2em;
            font-weight: 500;
        }

        .period {
            transform: translateY(-20px);
            background: -webkit-linear-gradient(90deg, #f7b63f, #faf879);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
        }

        .seconds {
            transform: translateY(16px);
            background: -webkit-linear-gradient(90deg, #24ff6d, #2f93f1);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
        }

        .calender {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.3em;
            font-weight: 500;
            margin-bottom: 5px;
            background: -webkit-linear-gradient(90deg, #ae4af6, #ff98d1);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
        }

        .day-name,
        .year {
            margin-left: 8px;
        }

        .dot-menu-btn {
            position: absolute;
            top: 0;
            right: 0;
            margin: 10px;
            color: #efefef;
            font-size: 1.5em;
            cursor: pointer;
        }

        .dot-menu {
            z-index: 999;
            position: absolute;
            top: 7px;
            right: 5px;
            list-style: none;
            background: #353e54;
            padding: 10px 20px;
            border-radius: 5px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
            visibility: hidden;
            opacity: 0;
            transition: 0.4s ease;
        }

            .dot-menu.active {
                visibility: visible;
                opacity: 1;
            }

        .menu-item {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .clock-format-text {
            color: #efefef;
            font-size: 0.9em;
            margin-right: 20px;
        }

        .format-switch-btn {
            width: 35px;
            height: 15px;
            background: #485470;
            border-radius: 75px;
            box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.1), inset -2px -2px 4px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .format-switch-btn:before {
                content: "";
                position: absolute;
                width: 14px;
                height: 14px;
                background: #ff5e9a;
                border-radius: 50%;
                box-shadow: 0 5px 25px #ff5e9a;
                transform: translateX(-10px);
                transition: 0.4s ease;
                transition-property: background, transform;
            }

            .format-switch-btn.active:before {
                background: #0bff8d;
                box-shadow: 0 5px 25px #0bff8d;
                transform: translateX(10px);
            }
        #screenContainer {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: #2e2e44;
            display: flex;
            justify-content: center;
            align-items: center;
            display:none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--头部区域-->
        <div class="head">
            <h1 style="font-size: 28px;margin:0;color:#fff;">温度检测装置系统</h1>
            <div class="head-img"></div>
        </div>
        <div class="layui-container">
            <div class="layui-row" style="width: 100%;margin-top:20px;">
                <!-- 电压电流显示 -->
                <div class="layui-col-xs4" v-for="(item,index) in dataList" :key="item.deviceid">
                    <div class="layui-card" v-on:dblclick="editElevatorId(item)">
                        <div class="layui-card-header">
                            <div class="icon_cab"></div>
                            <div :class="stateList[item.type]"></div>
                        </div>
                        <div class="layui-card-body">
                            <form class="layui-form" style="width:100%;">
                                <div class="layui-form-item">
                                    <label class="layui-form-label myclass">电梯名称</label>
                                    <div class="layui-input-block myBlock">
                                        <span class="eleValue">{{item.elevatorname}}</span>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label myclass">电梯编号</label>
                                    <div class="layui-input-block myBlock">
                                        <span class="eleValue">{{item.deviceid}}</span>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label myclass">当前温度</label>
                                    <div class="layui-input-block myBlock">
                                        <span class="eleValue">{{item.temperature}}</span>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label myclass">预设值</label>
                                    <div class="layui-input-block myBlock">
                                        <span class="eleValue">{{item.temperaturethreshold}}</span>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label myclass">报警温度</label>
                                    <div class="layui-input-block myBlock">
                                        <span class="eleValue" style="color:red;">{{item.alarm_temperature}}</span>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label myclass">报警时间</label>
                                    <div class="layui-input-block myBlock">
                                        <span class="eleValue" style="font-size:16px;">{{item.alarmTime}}</span>
                                    </div>
                                </div>
                                <div class="layui-form-item" style="text-align:right;">
                                    <button type="button" class="layui-btn layui-btn-normal" v-on:click="acceptAlert(item)">
                                        <i class="layui-icon layui-icon-ok layui-font-12"></i>接纳报警
                                    </button>
                                    <button type="button" class="layui-btn  layui-btn-warm" v-on:click="reset(item)">
                                        <i class="layui-icon layui-icon-refresh layui-font-12"></i>重置
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 退出点击区域 -->
        <div class="logout" id="btnClose"></div>
        <!-- 参数设置点击区域 -->
        <div class="paramSet" id="btnParam"></div>
        <!-- 时间设置点击区域 -->
        <div class="dateSet" id="btnDate"></div>
        <!-- 屏保时间设置点击区域 -->
        <div class="screenSet" id="btnScreen"></div>

        <!-- 参数内容区域 -->
        <div id="content">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width:100px;">电梯编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" v-model="configInfo.deviceid" placeholder="请输入电梯编号(eg:1,2,3...)" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width:100px;">电梯名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" v-model="configInfo.elevatorname" placeholder="请输入电梯名称(eg:电梯1,电梯2,电梯3...)" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width:100px;">温度值</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" v-model="configInfo.temperaturethreshold" placeholder="请输入温度(eg:10,20,40...)" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </form>
        </div>
        <!-- 时间校对区域 -->
        <div id="dateContainer">
            <input type="datetime" class="layui-input" id="start" v-model="currentTime" placeholder="YYYY-MM-dd HH:mm:ss">
        </div>
        <!-- 电梯ID设置区域 -->
        <div id="IdContainer" style="display: none; margin-top: 10px; padding: 10px; ">
            <input type="text" class="layui-input" v-model="currentId">
        </div>

        <!-- 屏保时间设置 -->
        <div id="scrContainer" style="display: none; margin-top: 10px; padding: 10px; ">
            <input type="text" class="layui-input" lay-affix="number" v-model="screenTime"/>
        </div>

        <div style="display:none;">
            <audio id="audio" src="../ui/alert.mp3" controls loop />
        </div>

    </div>

    <div id="screenContainer">
        <div class="digital-clock">
            <div class="time">
                <span class="hours">00</span> <span class="dots">:</span> <span class="minutes">00</span>
                <div class="right-side"><span class="period">AM/PM</span> <span class="seconds">00</span></div>
            </div>
            <div class="calender">
                <span class="year">Year</span>年
                <span class="month-name">Month</span>月
                <span class="day-num">00</span>日&nbsp;
                <span class="day-name">Day</span>
            </div>
        </div>
    </div>
    <script src="~/ui/jquery.min.js"></script>
    <script src="~/ui/layui/layui.js"></script>
    <script src="~/ui/vue/vue.min.js"></script>
    <script src="~/ui/toastr/toastr.min.js"></script>
    <script src="~/ui/observer.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    dataList: [],
                    stateList: ['icon_offline', 'icon_normal', 'icon_fault'],
                    isPlaying: false,
                    configInfo: {
                        deviceid: '',
                        elevatorname: '',
                        temperaturethreshold: ''
                    },
                    currentTime: '',
                    currentId: '',
                    screenTime:0,
                }
            },
            created() {
                this.InitData()
            },
            computed: {
                className() {
                    const len = this.dataList.length;
                    if (len !== 0) return `layui-col-xs${12 / len}`
                    return `layui-col-xs12`
                }
            },
            methods: {
                reset(item) {
                    $.post({
                        url: `/api/Elevator/Reset?deviceid=${item.deviceid}`,
                        contentType: 'application/json',
                        dataType: 'json',
                        success: (res) => {
                            if (res.errcode !== 0) return toastr.error(res.errmsg)
                            //vm.dataList = res.data
                            toastr.success('操作成功');
                            this.InitData()
                        },
                        error: () => {
                            toastr.error('操作失败,请重试');
                        }
                    })
                },
                acceptAlert(item) {
                    //
                    $.post({
                        url: `/api/Elevator/ReceiveAlarm?deviceid=${item.deviceid}`,
                        contentType: 'application/json',
                        dataType: 'json',
                        success: (res) => {
                            if (res.errcode !== 0) return toastr.error(res.errmsg)
                            const audio = document.querySelector('#audio')
                            audio.pause()
                            audio.currentTime = 0
                            this.isPlaying = false;
                        },
                        error: () => {
                            toastr.error('接纳报警操作失败');
                        }
                    })
                },
                InitData() {
                    // QueryPoint
                    $.post({
                        url: '/api/Elevator/QueryPoint',
                        contentType: 'application/json',
                        dataType: 'json',
                        success: (res) => {
                            if (res.errcode !== 0) return toastr.error(res.errmsg)
                            this.dataList = res.data
                        },
                        error: () => {
                            toastr.error('请求数据失败,请重新刷新页面');
                        }
                    })
                },
                playAudio() {
                    const audio = document.querySelector('#audio')
                    audio.currentTime = 0
                    audio.play()
                    this.isPlaying = true
                },
                editElevatorId(item) {
                    vm.currentId = ''
                    let index = layer.open({
                        title: '设置电梯编号',
                        type: 1,
                        area: ['500px', '180px'],
                        content: $('#IdContainer'),
                        btn: ['确认', '取消'],
                        yes: () => {
                            if (vm.currentId === '') return toastr.info('电梯编号不能为空')
                            $.post({
                                url: `/api/Elevator/SetDeviceId?id=${vm.currentId}`,
                                contentType: 'application/json',
                                dataType: 'json',
                                success: (res) => {
                                    if (res.errcode !== 0) return toastr.error(res.errmsg)
                                    toastr.success('修改电梯编号成功');
                                    layer.close(index);
                                },
                                error: () => {
                                    toastr.error('修改电梯编号失败');
                                }
                            })
                        }
                    });

                }
            }
        });
        window.onload = function () {
            // 初始化数据
            layui.use('laydate', function () {
                var laydate = layui.laydate;

                //执行一个laydate实例
                laydate.render({
                    elem: '#start',
                    format: 'yyyy-MM-dd HH:mm:ss',
                    show: false,
                    type: 'datetime',
                    done: function (value, date, endDate) {
                        console.log(value); //得到日期生成的值，如：2017-08-18
                        vm.currentTime = value
                    }
                });
            });
            function init() {
                var ws;
                if ('WebSocket' in window) {
                    ws = new WebSocket('ws://' + window.location.host);
                } else if ('MozWebSocket' in window) {
                    ws = new MozWebSocket('ws://' + window.location.host);
                };
                ws.onopen = function () {
                    //ws.send("1111");
                    console.log('websocket 打开成功');
                };
                ws.onerror = function () {
                    console.log('websocket 连接错误');
                    toastr.error('websocket 连接错误');
                };
                ws.onmessage = function (evt) {
                    var res = JSON.parse(evt.data);
                    vm.dataList = res;
                    const index = vm.dataList.findIndex(item => item.alarm_flag === 1);
                    if (!vm.isPlaying && index !== -1) {
                        vm.playAudio();
                    }
                }
            }
            init();

            // 屏保
            function QueryScreen() {
                $.post({
                    url: '/api/Elevator/QueryScreenTime',
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (res) {
                        if (res.errcode !== 0) return toastr.error(res.errmsg)
                        if (res.data >= 0) {
                            initScreenSaver(parseInt(res.data) * 1000);
                        } else {
                            initScreenSaver(60000);
                        }
                    },
                    error: function () {
                        initScreenSaver(60000);
                    }
                })
            }
            var saver;
            function initScreenSaver(time) {
                if (time === 0) return;
                saver = new ScreenSaver({ timeout: time });   //无动作时间
                saver.timeout = function () {
                    // window.sessionStorage.setItem('currentPath', "/Index/Detail");
                    document.getElementById("screenContainer").style.display = "flex";
                }
            }
            QueryScreen();
            // 初始化日期
            function initDate() {
                var today = new Date()
                const dayNum = today.getDate()
                const year = today.getFullYear()
                const dayName = today.toLocaleString("zh-CN", { weekday: "long" })
                //const monthName = today.toLocaleString("default", { month: "short" })
                const monthName = today.getMonth() + 1
                document.querySelector(".month-name").innerHTML = monthName
                document.querySelector(".day-name").innerHTML = dayName
                document.querySelector(".day-num").innerHTML = dayNum
                document.querySelector(".year").innerHTML = year
            }
            initDate();
            function clock() {
                var today = new Date()
                var hours = today.getHours()
                var minutes = today.getMinutes()
                var seconds = today.getSeconds()
                let period = "AM"
                //set the time period
                if (hours >= 12) {
                    period = "PM"
                }
                //set 12 hour clock format
                // var formatValue = formatSwitchBtn.getAttribute("date-format")
                // if (formatValue === "12") {
                //   hours = hours > 12 ? hours % 12 : hours
                // }
                //add 0 for the value lower than 10
                if (hours < 10) {
                    hours = "0" + hours
                }
                if (minutes < 10) {
                    minutes = "0" + minutes
                }
                if (seconds < 10) {
                    seconds = "0" + seconds
                }
                document.querySelector(".hours").innerHTML = hours
                document.querySelector(".minutes").innerHTML = minutes
                document.querySelector(".period").innerHTML = period
                document.querySelector(".seconds").innerHTML = seconds
            }
            var updateClock = setInterval(clock, 1000)
            document.getElementById("screenContainer").addEventListener("click", function () {
                document.getElementById("screenContainer").style.display = "none";
            });
            // 左侧关闭页面
            document.getElementById("btnClose").addEventListener("dblclick", function () {
                if (confirm("您确定要关闭本页吗？")) {
                    $.post({
                        url: '/api/Elevator/CloseBrowser',
                        contentType: 'application/json',
                        dataType: 'json',
                        success: function (res) {
                            if (res.errcode !== 0) return toastr.error(res.errmsg);
                        },
                        error: () => {
                            toastr.error('关闭页面失败');
                        }
                    })
                }
                else {
                    toastr.info('关闭操作取消');
                }

            });
            // 右侧设置温度参数
            document.getElementById("btnParam").addEventListener("dblclick", function () {
                $.post({
                    url: '/api/Elevator/QueryConfig',
                    contentType: 'application/json',
                    async: true,
                    dataType: 'json',
                    success: function (res) {
                        if (res.errcode !== 0) return toastr.error(res.errmsg);
                        vm.configInfo = res.data
                    },
                    error: () => {
                        toastr.error('参数查询失败', '', { hideDuration: 500 });
                    }
                })
                var index = layer.open({
                    title: '参数设置',
                    type: 1,
                    area: ['500px', '250px'],
                    content: $('#content'),
                    offset:'t',
                    btn: ['确认', '取消'],
                    yes: () => {
                        $.post({
                            url: '/api/Elevator/UpdateConfig',
                            contentType: 'application/json',
                            dataType: 'json',
                            data: JSON.stringify(vm.configInfo),
                            success: function (res) {
                                if (res.errcode !== 0) return toastr.error(res.errmsg);
                                layer.msg('参数设置成功');
                                layer.close(index);
                                vm.InitData()
                            },
                            error: () => {
                                toastr.error('参数设置失败', '', { hideDuration: 500 });
                            }
                        })
                    }
                });
            });
            // 左下设置时间参数
            document.getElementById("btnDate").addEventListener("dblclick", function () {
                vm.currentTime = ''
                var index = layer.open({
                    title: '时间校对',
                    type: 1,
                    offset:'t',
                    area: ['500px', '180px'],
                    content: $('#dateContainer'),
                    btn: ['校对', '取消'],
                    yes: () => {
                        if (vm.currentTime === '') return toastr.info('时间不能为空')
                        $.post({
                            url: `/api/Elevator/SetTime?date=${vm.currentTime}`,
                            contentType: 'application/json',
                            dataType: 'json',
                            success: function (res) {
                                if (res.errcode !== 0) return toastr.error(res.errmsg);
                                layer.msg('时间校对成功');
                                layer.close(index);
                            },
                            error: () => {
                                toastr.error('时间校对失败', '', { hideDuration: 500 });
                            }
                        })
                    }
                });
            });

            // 右下角设置屏保时间
            document.getElementById("btnScreen").addEventListener("dblclick", function () {
                vm.screenTime = ''
                var index = layer.open({
                    title: '屏保时间设置',
                    type: 1,
                    area: ['500px', '180px'],
                    content: $('#scrContainer'),
                    offset:'t',
                    btn: ['确认', '取消'],
                    yes: () => {
                        if (vm.screenTime === '') return toastr.info('屏保时间不能为空')
                        const time = parseInt(vm.screenTime);
                        console.log(parseInt)
                        $.post({
                            url: `/api/Elevator/SetScreenTime?Screensaver=${time}`,
                            contentType: 'application/json',
                            dataType: 'json',
                            success: function (res) {
                                if (res.errcode !== 0) return toastr.error(res.errmsg);
                                layer.msg('设置成功');
                                layer.close(index);
                            },
                            error: () => {
                                toastr.error('设置失败', '', { hideDuration: 500 });
                            }
                        })
                    }
                });
            });
        }
    </script>
</body>
</html>